﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>xBim Viewer 3</title>
    <!--<script src="/Scripts/gl-matrix.js"></script>
    <script src="/Scripts/webgl-utils.js"></script>-->
    <link href="../Scripts/bootstrap/bootstrap.min.css" />
    <link href="../Scripts/bootstrap/bootstrap-theme.min.css" />

    <script src="/Scripts/xbim/xbim-viewer.debug.bundle.js"></script>
    <script src="/Scripts/xbim/xbim-navigation-cube.js"></script>
    <script src="/Scripts/xbim/xbim-navigation-home.js"></script>

    <script src="/Scripts/jquery/jquery-1.9.0.min.js"></script>
    <script src="/Scripts/bootstrap/bootstrap.min.js"></script>

    <style>

        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        canvas {
            display: block;
            border: none;
            margin-left: auto;
            margin-right: auto;
        }
    </style>

</head>

<body>

    <div style="float:left; margin:20px;">
        <div>
            当前ID: <span id="coords"></span>
        </div>
        <div>
            帧速率: <span id="fps"></span>
        </div>
        <div>
            柔化质地： <span id="fpt"></span>
        </div>
        错误日志：
        <div id="errLog" style="color: red">  </div>
    </div>
    <div style="float:right; margin:20px;">
        <div>
            导航模式：
            <button onclick="viewer.navigationMode = 'orbit'">沿轨迹运行</button>
            <button onclick="viewer.navigationMode = 'free-orbit'">自由旋转</button>
            <button onclick="viewer.navigationMode = 'pan'">平移</button>
            <button onclick="viewer.navigationMode = 'zoom'">缩放</button>
        </div>
        <div>
            视图：
            <button onclick="viewer.show('front')">正面</button>
            <button onclick="viewer.show('back')">背面</button>
            <button onclick="viewer.show('top')">上面</button>
            <button onclick="viewer.show('bottom')">下面</button>
            <button onclick="viewer.show('left')">左面</button>
            <button onclick="viewer.show('right')">右面</button>
        </div>

        <div>
            剖切：
            <button onclick="viewer.clip();"> 剖切 </button>
            <button onclick="viewer.unclip();"> 取消剖切 </button>
        </div>
        <div>
            相机视角：
            <button onclick="viewer.camera = 'perspective';"> 透视 </button>
            <button onclick="viewer.camera = 'orthogonal';"> 正交 </button>
        </div>
        <div>
            设置墙：
            <button onclick="makeWallsRed()"> 刷红 所有墙 </button>
            <button onclick="hideWalls()"> 隐藏 所有墙 </button>
            <button onclick="resetWalls()"> 复位 所有墙 </button>
            <button onclick="selectAllWalls()"> 选中 所有墙 </button>
        </div>
        <div>
            间隙：
            <button onclick="viewer.setState(states.HIDDEN, types.IFCSPACE)"> 隐藏 </button>
            <button onclick="viewer.setState(states.UNDEFINED, types.IFCSPACE)"> 显示 </button>
        </div>
        <div>
            单击隐藏：
            <form>
                <label> <input type="radio" name="radioHiding" value="hideOne" /> 隐藏单个 </label>
                <label> <input type="radio" name="radioHiding" value="hideType" /> 隐藏类型 </label>
                <label> <input type="radio" name="radioHiding" value="noHide" /> 取消 </label>
                <button onclick="for (var i in types){ if (types[i] !== types.IFCSPACE) {viewer.setState(states.UNDEFINED, types[i])}}"> 显示所有 </button>
            </form>
        </div>
        <div>
            样式：
            <button onclick="for (var i in types){ if (types[i] !== types.IFCSPACE) {viewer.setStyle(1, types[i])}}"> 透明化 </button>
            <button onclick="for (var i in types){ if (types[i] !== types.IFCSPACE) {viewer.setStyle(2, types[i])}}"> 白化 </button>
            <button onclick="for (var i in types){ if (types[i] !== types.IFCSPACE) {viewer.setStyle(xState.UNSTYLED, types[i])}}"> 默认 </button>
        </div>
        <div>
            渲染模式:
            <label> <input type="radio" name="radioRenderingMode" value="normal" checked="checked" onchange="viewer.renderingMode = 'normal';" /> 普通 </label>
            <label> <input type="radio" name="radioRenderingMode" value="xray" onchange="viewer.renderingMode = 'x-ray';" /> X射线 </label>
        </div>
    </div>

    <!-- 画布 -->
    <canvas id="xBIM-viewer" width="800" height="600"></canvas>

    <!-- 基础脚本 -->
    <script type="text/javascript">
        var QueryString = function () {
            // This function is anonymous, is executed immediately and
            // the return value is assigned to QueryString!
            var queryString = {};
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                // If first entry with this name
                if (typeof queryString[pair[0]] === "undefined") {
                    queryString[pair[0]] = pair[1];
                    // If second entry with this name
                } else if (typeof queryString[pair[0]] === "string") {
                    var arr = [queryString[pair[0]], pair[1]];
                    queryString[pair[0]] = arr;
                    // If third or later entry with this name
                } else {
                    queryString[pair[0]].push(pair[1]);
                }
            }
            return queryString;
        }();
    </script>

    <!-- 业务脚本 -->
    <script type="text/javascript">

    // 初始化，定义事件
			var viewer = new xViewer("xBIM-viewer");
			viewer.background = [0, 0, 0];
			viewer.on("error", function (arg) {
			    var container = viewer._canvas.parentNode;
			    if (container) {
			        //preppend error report
			        container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre>" + container.innerHTML;
			    }
			});

			viewer.show("back");
			viewer.on("pick", function(arg){
				var span = document.getElementById("coords");
				if (span){
					span.innerHTML = arg.id;
				}
			});
			viewer.on("mouseDown", function (arg)
			{
			    viewer.setCameraTarget(arg.id);
			});
			viewer.on("fps", function(fps){
				var span = document.getElementById("fps");
				if (span){
					span.innerHTML = fps;
				}
			});
			var span = document.getElementById("fpt");
			if (span){
				span.innerHTML = viewer._fpt != null;
			}

        // 加载模型
			var model = "";
			if (typeof (QueryString.model) == "undefined") { model = "/res/data/SampleHouse.wexbim"; }
			else { model = QueryString.model ; }
			viewer.load(model);
			viewer.start();


        //
			var types = xProductType;
			var states = xState;
			viewer.defineStyle(0, [255,0,0,255]);  //red
			viewer.defineStyle(1, [0,0,255,100]);  //semitransparent blue
			viewer.defineStyle(2, [255,255,255,255]); //white
			var makeWallsRed = function(){
				viewer.setStyle(0, types.IFCWALLSTANDARDCASE );
				viewer.setStyle(0, types.IFCCURTAINWALL );
				viewer.setStyle(0, types.IFCWALL );
			}
			var selectAllWalls = function () {
			    viewer.setState(states.HIGHLIGHTED, types.IFCWALLSTANDARDCASE);
			    viewer.setState(states.HIGHLIGHTED, types.IFCCURTAINWALL);
			    viewer.setState(states.HIGHLIGHTED, types.IFCWALL);
			}
			var hideWalls = function(){
				viewer.setState(states.HIDDEN, types.IFCWALLSTANDARDCASE );
				viewer.setState(states.HIDDEN, types.IFCCURTAINWALL );
				viewer.setState(states.HIDDEN, types.IFCWALL );
			}
			var resetWalls = function(){
				viewer.setState(states.UNDEFINED, types.IFCWALLSTANDARDCASE );
				viewer.setState(states.UNDEFINED, types.IFCCURTAINWALL );
				viewer.setState(states.UNDEFINED, types.IFCWALL );
			}
			viewer.on("pick", function (args) {
			    var id = args.id;
				var radios = document.getElementsByName("radioHiding");
				for(var i in radios) {
			        if (radios.hasOwnProperty(i)) {
			            var radio = radios[i];
			            if (radio.checked) {
			                var val = radio.value;
			                if (val === "noHiding") return;
			                if (val === "hideOne") viewer.setState(states.HIDDEN, [id]);
			                if (val === "hideType") {
			                    var type = viewer.getProductType(id);
			                    viewer.setState(states.HIDDEN, type);
			                }
			                break;
			            }
			        }
			    }

			    //viewer.zoomTo(id);
			});
        // 加载插件： 导航，主页
			var cube = new xNavigationCube();
			viewer.addPlugin(cube);

			var home = new xNavigationHome();
			viewer.addPlugin(home);</script>


</body>

</html>